<template>
	<view class="page-content">
		<view class="search-box">
			<custom-input placeholder="搜索" background="#FFFFFF" :text="filterParmas.searchValue"
				@handleSearch="handleSearch"></custom-input>
		</view>
		<view class="sort-box">
			<view style="flex: 1;">
				<sort-tab sortText="价格排序" @sortChanged="sortPriceChanged"></sort-tab>
			</view>
			<view style="flex: 1;">
				<sort-tab sortText="距离排序" @sortChanged="sortDistanceChanged"></sort-tab>
			</view>
		</view>

		<scroll-view scroll-y="true" style="flex:1;overflow: hidden;" @scrolltolower="addRandomData"
			:refresher-enabled="true" @refresherrefresh="handlerefresh" :refresher-triggered="showrefresh">
			<template v-if="dataList.length===0&&status==='nomore'">
				<empty></empty>
			</template>
			<template v-else>
				<view class="cards-list">
					<view class="mt-16" v-for="(item,index) in dataList" :key="index" @click="handleToBZSDetail(item.id)">
						<party-card :data="item"></party-card>
					</view>
					<u-loadmore :status="status" />
				</view>
			</template>
		</scroll-view>
		<view class="add-btn"><add-btn link="/page_index/pet-party/party-publish/party-publish"></add-btn></view>
	</view>
</template>

<script>
	import partyCard from "components/common/card/pet-party/components/party-card.vue";
	import customInput from "components/common/custom-input.vue";
	import sortTab from "components/index/cmbz/sort-tab.vue";
	import addBtn from "components/index/add-fixed-btn.vue";
	import empty from "components/common/empty/empty.vue";
	import petParty from "../../../api/petParty.js";
	import utils from "../../../utils/util.js";
	export default {
		data() {
			return {
				status: 'loadmore',
				dataList: [],
				filterParmas: {
					searchValue: '',
					nowLat: 0,
					nowLng: 0,
					sortOrder: "",
					sort: "",
					pageNum: 0,
					pageSize: this.$config.pageSize,
				}, //筛选参数
				showrefresh: false
			};
		},
		onShow() {
			this.dataList = [];
			if (this.filterParmas.nowLat && this.filterParmas.nowLng) {
				this.getDataList();
			} else {
				utils.getLocationInfo().then(res => {
					this.filterParmas.nowLat = res.latitude;
					this.filterParmas.nowLng = res.longitude;
					this.getDataList()
				}).catch(err => {
					this.getDataList()
				})
			}
		},
		methods: {
			addRandomData() {
				if (this.status === 'loadmore')
					this.getDataList()
			},
			sortPriceChanged(value) {
				this.filterParmas.sortOrder = value;
				this.filterParmas.sort = "price";
				this.dataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList()
			},
			sortDistanceChanged(value) {
				this.filterParmas.sortOrder = value;
				this.filterParmas.sort = "distance";
				this.dataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList();
			},
			getDataList() {
				if (this.status !== 'loading') {
					this.status = "loading";
					this.filterParmas.pageNum++;
					petParty.getPetPartyList(this.filterParmas).then(res => {
						if (res.code === 200) {
							this.dataList.push(...res.rows);
							if (res.rows?.length < this.$config.pageSize)
								this.status = 'nomore'
							else {
								this.status = 'loadmore'
							}
							this.showrefresh = false;
						} else {
							throw Error()
						}
					}).catch(err => {
						this.status = 'nomore';
						this.showrefresh = false;
						console.log(err);
					})
				}
			},
			handleToBZSDetail(id) {
				uni.navigateTo({
					url: '/page_index/pet-party/party-detail/party-detail?id=' + id,
				})
			},
			handleSearch(val) {
				this.filterParmas.searchValue = val;
				this.dataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList()
			},
			handlerefresh() {
				this.showrefresh = true;
				this.dataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList();
			}
		},
		components: {
			partyCard,
			customInput,
			sortTab,
			addBtn,
			empty
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background-color: #F6F6F6;
		padding: 0 32rpx;
		display: flex;
		flex-direction: column;
		position: relative;

		.search-box {
			padding: 16rpx 0 24rpx 0;
		}

		.sort-box {
			display: flex;
			justify-content: cneter;
			align-items: center;
			margin-bottom: 24rpx;
		}

		.cards-list {
			position: relative;

			.mt-16 {
				&:first-child {
					margin-top: 0;
				}
			}
		}

		.add-btn {
			position: absolute;
			bottom: 218rpx;
			right: 32rpx;
		}
	}
</style>